<template>
    <view class="load" v-if="!load">
		<u-loading-icon mode="circle" inactive-color="#fff" text="正在加载..." vertical></u-loading-icon>
	</view>
    <view v-else>
        <view class="statebox" v-if="list.Status == 0">
            <image class="stateimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715333709526327.png" mode="widthFix"></image>
            <view class="statetext">待开始</view>
        </view>
        <view class="statebox" v-if="list.Status == 1">
            <image class="stateimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17153337397341490.png" mode="widthFix"></image>
            <view class="statetext">已结束</view>
        </view>
        <view class="statebox" v-if="list.Status == 2">
            <image class="stateimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17153337397341490.png" mode="widthFix"></image>
            <view class="statetext">已使用</view>
        </view>
        <view class="statebox" v-if="list.Status == -1">
            <image class="stateimg" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/17153337707771082.png" mode="widthFix"></image>
            <view class="statetext">已取消</view>
        </view>
        <view class="content">
            <view class="title_1">预订信息</view>
            <view class="tabbox">
                <view class="title">场地名称</view>
                <view class="name">{{shoplist.ShopName}}</view>
            </view>
            <!-- <view class="tabbox">
                <view class="title">运动项目</view>
                <view class="name">羽毛球</view>
            </view> -->
            <view class="tabbox">
                <view class="title">预订日期</view>
                <view class="name">{{ $util.unixDatetime(list.OrderDate) }}</view>
            </view>
            <view class="tabbox">
                <view class="title">预订场次</view>
                <view>
                    <view class="name">{{room+' '+startTime+'-'+endTime }}</view>
                    <!-- <view class="name">3号场 14:00-15:00</view> -->
                </view>
            </view>
            <view class="tabbox">
                <view class="title">手机号</view>
                <view class="name">{{userlist.Phone || ''}}</view>
            </view>
        </view>
        <view class="QRcode" v-if="type == 0">
            <view class="codetitle">到场后请出示验证码</view>
            <view class="codeflex">
                <image class="code_img" :src="list.QRImg"></image>
                <view class="shadwbox" v-if="list.Status !=0">
                        {{'已使用'}}
                </view>
                <!-- <view class="codebox" v-for="(item,index) in list.CheckCode" :key="index">
                    {{item}}
                </view> -->
            </view>
                
        </view>
        <view class="adderbox" v-if="type == 0">
            <view class="leftbox">
                <view class="name">{{shoplist.ShopName || ''}}</view>
                <view class="addre">{{shoplist.Address || ''}}</view>
            </view>
            <image class="map" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715334367200304.png" mode="widthFix" @click="openMap"></image>
            <image v-if="shoplist.ServerPhone" class="call" src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/upload/1715334377426145.png" mode="widthFix" @click="callNumber"></image>
        </view>
        <view class="paymentbox">
            <view class="paytitle">支付明细</view>
            <view class="paylist">
                <view class="time">
                    {{ room+' '+startTime+'-'+endTime}}
                </view>
                <view class="money">{{'¥'+list.Price}}</view>
            </view>
            <!-- <view class="paylist">
                <view class="time">1号场 14:00-15:00</view>
                <view class="money">¥68.00</view>
            </view> -->
             <view class="Subtotal">
                <text class="subtext">小计</text>
                <text class="submoney">{{'￥'+list.Price}}</text>
            </view>
        </view>
        <view style=" height: 200rpx;"></view>
        <block v-if="type == 0">
             <!--  #ifdef MP-WEIXIN -->
            <view class="buttonbox">
                <!-- <view class="cancelbtn" @click="showmask = true">取消预订</view> -->
                
                <button hover-class="none" open-type="share" plain="true" style="width: 320rpx;height: 88rpx;">
                    <view class="sharebox">
                        <view class="text5" >分享好友</view>
                    </view>
                </button>
              
                <!-- #ifdef APP-PLUS -->
                <!-- <button hover-class="none" @click="app_share" plain="true" style="width: 320rpx;height: 88rpx;">
                    <view class="sharebox">
                        <view class="text5">分享好友</view>
                    </view>
                </button> -->
                <!-- #endif -->
            </view>
            <!-- #endif -->
            <view class="buttonbox" v-if="list.Status == 1">
                <view class="againbtn" @click="redirect_to('/pages/court/stadium?id='+list.ShopID)">再来一单</view>
            </view>
            <view class="buttonbox" v-if="list.Status == -1">
                <view class="againbtn" @click="redirect_to('/pages/court/stadium?id='+list.ShopID)">重新预订</view>
            </view>
        </block>


        <view class="maskbox" v-if="showmask">
            <view class="shadowbox">
                <view class="shadowcont">
                    <view class="title">确定取消预订?</view>
                    <view class="smolltitle">支付金额将原路返还</view>
                    <view class="btntrue" @click="concancel">确认取消</view>
                    <view class="cancel" @click=" showmask = false">再想想</view>
                </view>
            </view>
        </view>

        <!-- APP 分享 转发好友、朋友圈 -->
		<!-- #ifdef APP-PLUS -->
		<uni-popup ref="share" type="bottom">
			<view class="x-share">
				<view class="item" @click="shareWX()">
					<image  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/wx_logo.png"></image>
					<span>转发好友</span>
				</view>
				<view class="item" @click="sharePYQ()">
					<image  src="https://golfdate.oss-cn-shenzhen.aliyuncs.com/icon/pyq_logo.png"></image>
					<span>分享朋友圈</span>
				</view>
			</view>
		</uni-popup>
		<!--  #endif -->
    </view>
</template>

<script>
export default {
components: {},
data() {
return {
    showmask:false,
    ID:'', 
    list:[],
    startTime:'',
    endTime:'',
    room:'',
    shoplist:[],
    userlist:[],
    load:false,
    type:0
};
},
onLoad(e){
    this.type = e?.type || 0
    this.ID = e?.id || '' 
    this.getOred()
},
methods: {

    changetime(item){
        let time = item.TimeRangeID.split('_')
        let room = time[0]
        let startTime = time[1].replace(/-/g, ':')
        let endTime = time[2].replace(/-/g, ':')
        return room+' '+startTime+'-'+endTime
    },
    async getOred(){
        let res = await this.$api.post('ShopOrder/ItemDetail',{
            ID:this.ID
        })
        if(res.code == 0){
            this.list = res.data
            let time = this.list.TimeRangeID.split('_')
            this.room = time[0]
            this.startTime = time[1].replace(/-/g, ':')
            this.endTime = time[2].replace(/-/g, ':')
            let res1 = await this.$api.post('Shop/Detail',{
                ID:this.list.ShopID
            })
            if(res1.code == 0){
                this.shoplist = res1.data
            }
            let user = await this.$api.post('User/GetUserInfo',{
                ID:this.list.UserID
            })
            if(user.code == 0){
                this.userlist = user.data
            }
            this.load = true
        }
    },
    async concancel(){
        let res = await this.$api.post('ShopOrder/CancelOrder',{
            ID:this.ID
        })
        if(res.code == 0){
            this.getOred()
        }
        this.showmask = false
    },
    sharePYQ() {
			const user = uni.getStorageSync('user');
			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let shareUrl = BaseUrl + paseUrl;

			console.log('share url-----' + shareUrl);

			uni.share({
				provider: 'weixin',
				scene: 'WXSceneTimeline',
				type: 0,
				href: shareUrl,
				title: user.Name + `向您推荐${this.place.ShopName}`,
				summary: `${this.place.Description}`,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				success: (res) => {
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
    shareWX() {
			const user = uni.getStorageSync('user');

			const pid = user.UserID;
			let id = this.ID;

			const BaseUrl = 'http://h5.golf.xiaojusmart.com/#/';
			const paseUrl = `pages/H5/match_detail?id=${id}&pid=${pid}`;
			let sharUrl = BaseUrl + paseUrl;
			let _this = this;
			uni.share({
				provider: 'weixin',
				scene: 'WXSceneSession',
				type: 5,
				imageUrl: 'https://golfdate.oss-cn-shenzhen.aliyuncs.com/golf_home_bg2.jpg',
				title: user.Name + `向您推荐${this.place.ShopName}`,
				miniProgram: {
					id: 'gh_ff1a33213d99',
					path: 'pages/court/stadium?id=' + id + '&pid=' + pid,
					type: 0,
					webUrl: sharUrl,
				},
				success: (res) => {
					console.log('success:' + 'pages/court/stadium?id=' + id + '&pid=' + pid);
					console.log('success:' + JSON.stringify(res));
					this.$refs.share.close();
				},
				fail(err) {
					console.log('fail:' + JSON.stringify(err));
				},
			});
		},
    app_share() {
			this.$refs.share.open();
		},
    openMap(item) {
			uni.openLocation({
				latitude: this.shoplist.Latitude,
				longitude: this.shoplist.Longitude,
				success: function () {
				}
			});
		},
    callNumber() {
			uni.makePhoneCall({
				phoneNumber: this.shoplist.ServerPhone,
				success: () => {
				},
				fail: () => {

					console.error('拨打电话失败！');
				},
			});
		},
},
created() {

},
}
</script>
<style lang='scss'>
page{
    background-color: #f6f6f6;
}
button[plain] {
	border: 0;
}
button::after{
    display: none !important;
    width: 0 !important;
    height: 0 !important;
}

.maskbox{
    width: 100%;
    height: 117vh;
    position: absolute;
    top:0;
    left: 0;
    background-color: #fff;
    .shadowbox{
        width: 100%;
        height: 100%;
        background-color: rgba(0,0,0,0.6);
        position: relative;
        .shadowcont{
            width: 580rpx;
            height: 428rpx;
            border-radius: 20rpx;
            background-color: #fff;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            text-align: center;
            .title{
                font-size: 36rpx;
                font-weight: 600;
                color: #333333;
                margin-bottom: 32rpx;
                margin-top: 48rpx;
            }
            .smolltitle{
                font-size: 28rpx;
                color: #666666;
                margin-bottom: 44rpx;
            }
            .btntrue{
                width: 486rpx;
                height: 96rpx;
                border-radius: 48rpx;
                background-color: #706EEE;
                text-align: center;
                line-height: 96rpx;
                font-size: 32rpx;
                color: #fff;
                margin-bottom: 30rpx;
                margin-left: 46rpx;
            }
            .cancel{
                font-size: 28rpx;
                color: #666666;
            }
        }
    }
}
.buttonbox{
    width: 100%;
    height: 196rpx;
    background-color: #fff;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    left: 0;
    padding-top: 20rpx;
    box-sizing: border-box;
    .cancelbtn{
        width: 320rpx;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        border-radius: 44rpx;
        border: 1rpx solid #706EEE;
        color: #706EEE;
        font-size: 32rpx;
        // margin-left: 42rpx;
        // margin-right: 24rpx;
    }
    .sharebox{
        width: 320rpx;
        height: 88rpx;
        border-radius: 44rpx;
        background-color: #706EEE;
        text-align: center;
        line-height: 88rpx;
        // margin-left: 44rpx;
        .text5{
            color: #fff;
            font-size: 32rpx;
        }
    }
    .againbtn{
        width: 670rpx;
        height: 88rpx;
        text-align: center;
        line-height: 88rpx;
        border-radius: 44rpx;
        border: 1rpx solid #706EEE;
        color: #706EEE;
        font-size: 32rpx;
        // margin-left: 40rpx;

    }
}
.paymentbox{
    width: 702rpx;
    // height: 242rpx;
    margin: 16rpx auto;
    background: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    .paytitle{
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
    }
    .paylist{
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 24rpx;
        .time{
            font-size: 28rpx;
            color: #666666;
        }
        .money{
            font-size: 28rpx;
            color: #333333;
        }
    }
    .Subtotal{
        height: 92rpx;
        border-top: 1rpx solid #E4E4E4;
        text-align: end;
        line-height: 92rpx;
        .subtext{   
            font-size: 24rpx;
            color: #999999;
        }
        .submoney{
            color: #706EEE;
            font-size: 32rpx;
        }
    }
}
.adderbox{
    width: 702rpx;
    height: 150rpx;
    border-radius: 12rpx;
    display: flex;
    align-items: center;
    margin: 0 auto;
    background-color: #fff;
    padding: 32rpx;
    box-sizing: border-box;
    .leftbox{
        margin-right: auto;
        .name{
            font-size: 32rpx;
            font-weight: 600;
            color: #333333;
        }
        .addre{
            font-size: 24rpx;
            color: #999999;
        }   
    }
    .map{
        width: 56rpx;
        height: 56rpx;
        margin-right: 24rpx;
        margin-left: 106rpx;
    }
    .call{
        width: 56rpx;
        height: 56rpx;
    }
}
.QRcode{
    width: 702rpx;
    // height: 300rpx;
    border-radius: 12rpx;
    margin: 16rpx auto;
    text-align: center;
    padding: 32rpx 0 ;
    box-sizing: border-box;
    background-color: #fff;
    .codetitle{
        font-size: 32rpx;
        font-weight: 600;
        color: #333333;
        margin-bottom: 24rpx;
    }
    .codeflex{
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        .shadwbox{
            width: 248rpx;
            height: 248rpx;
            background-color: rgba(0, 0, 0, 0.5);
            font-size: 28rpx;
            color: #fff;
            display: flex;
            justify-content: center;
            align-items: center;
            position: absolute;
            top: 0rpx;
            left: 50%;
            transform: translateX(-50%);
        }
        .code_img{
            width: 246rpx;
            height: 246rpx;
        }
        view:first-child {
            margin-left: 70rpx;
        }
    }
    .codebox{
        width: 80rpx;
        height: 92rpx;
        background-color: #FAFAFF;
        font-size: 42rpx;
        color: #333333;
        font-weight: bold;
        text-align: center;
        line-height: 92rpx;
        margin-right: 16rpx;
    }
    .codeimg{
        width: 168rpx;
        height: 168rpx;
        background-color: #333333;
    }
    .Invalidshow{
        width: 168rpx;
        height: 168rpx;
        background-color: rgba(255,255,255,0.6);
        position: absolute;
        left: 0;
        top: 0;
        color: #333333;
        text-align: center;
        line-height: 168rpx;
    }
}
.statebox{
    display: flex;
    margin: 32rpx 24rpx;
    .stateimg{
        width: 48rpx;
        height: 48rpx;
    }
    .statetext{
        font-size: 36rpx;
        color: #333333;
        font-weight: 600;
    }
}
.content{
    width: 702rpx;
    height: 378rpx;
    border-radius: 12rpx;
    padding: 32rpx;
    box-sizing: border-box;
    background-color: #fff;
    margin: 0 auto;
    .title_1{
        font-size: 32rpx;
        color: #333333;
        font-weight: 600;
        margin-bottom: 16rpx;
    }
    .tabbox{
        display: flex;
        // align-items: center;
        margin-bottom: 24rpx;
        justify-content: space-between;
        .title{
            font-size: 28rpx;
            color: #999999;
        }
        .name{
            font-size: 28rpx;
            color: #333333;
            // margin-left: 48rpx;
        }
    }
}
	.x-share {
		background-color: #ffffff;
		width: 750rpx;
		border-radius: 20rpx;
		padding: 40rpx 20rpx 80rpx;
		display: flex;
		box-sizing: border-box;

		.item {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			flex-direction: column;

			image {
				width: 64rpx;
				height: 64rpx;
				margin-bottom: 10rpx;
			}

			span {
				color: #2e2e2e;
			}
		}

	}
</style>